<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <el-alert
        v-if="basicForm.adminRemark"
        title="审核备注："
        :description="basicForm.adminRemark"
        type="error"
      >
      </el-alert>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="rpiStatus == '1'"
          @click="informEdit"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <div class="merchant-title mer-m-b-8">
          {{ basicForm.userShortName }}
        </div>
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>商户号：{{ basicForm.rpiNo }}</span>
            <span>商户类型：{{ basicForm.userTypeName }}</span>
            <span
              >行业类型：{{ basicForm.ysMerchantType }}/{{
                basicForm.industryName
              }}/{{ basicForm.mccCdName }}</span
            >
            <span>注册名称：{{ basicForm.registeredName }}</span>
            <!-- <span>门头名称：{{ basicForm.businessLicence }}</span> -->
            <span>门头名称：{{ basicForm.rpiName }}</span>
            <!-- <span>商户简称：{{ basicForm.userShortName }}</span> -->
            <span class="haruyuki-line-3"
              >经营范围：{{ basicForm.businessScope }}</span
            >
            <span>注册资金：{{ basicForm.businessRegisteredCapital }}</span>
            <span
              >所在区域：{{ basicForm.mercProv }}/{{ basicForm.mercCity }}/{{
                basicForm.mercArea
              }}</span
            >
            <span>经营地址：{{ basicForm.contactsAddr }}</span>
            <span>服务商：{{ basicForm.serName }}</span>
            <span>客户经理：{{ basicForm.accountManagerName }}</span>
            <span v-if="basicForm.projectBankName"
              >联合收单银行：{{ basicForm.projectBankName }}</span
            >
          </div>
          <div class="merchant-item-content">
            <span>法人姓名：{{ basicForm.legalPersonName }}</span>
            <span>法人性别：{{ basicForm.crpGenderName }}</span>
            <span>法人电话：{{ basicForm.legalPersonPhone }}</span>
            <span>法人职业：{{ basicForm.crpProfessionName }}</span>
            <span>法人职务：{{ basicForm.crpProfessionLittleName }}</span>
            <span>法人身份证号：{{ basicForm.legalPersonId }}</span>
            <span
              >法人身份证有效期：{{ basicForm.legalPersonIdSdate }} 至
              {{ basicForm.legalPersonIdEdate }}</span
            >
            <span
              >法人省市区：{{ basicForm.legalProvinceName }}/{{
                basicForm.legalCityName
              }}/{{ basicForm.legalAreaName }}</span
            >
            <span>法人地址：{{ basicForm.crpAddr }}</span>
            <span>社会信用代码：{{ basicForm.businessLicenceNo }}</span>
            <span v-if="basicForm.businessLicenceSDate"
              >营业执照有效期：{{ basicForm.businessLicenceSDate }} 至
              {{ basicForm.businessLicenceEDate }}</span
            >
          </div>
          <div class="merchant-item-content">
            <span>联系人姓名：{{ basicForm.contactsName }}</span>
            <span>联系人性别：{{ basicForm.contactsGenderName }}</span>
            <span>联系人身份证号：{{ basicForm.contactPersonId }}</span>
            <span
              >联系人身份证有效期：{{ basicForm.idValiddateBegin }} 至
              {{ basicForm.idValiddateEnd }}</span
            >
            <span>联系方式：{{ basicForm.contactsPhone }}</span>
            <span>联系人邮箱：{{ basicForm.contactsEmail }}</span>
            <span v-if="basicForm.expandingManager"
              >拓展经理姓名：{{ basicForm.expandingManager }}</span
            >
            <span v-if="basicForm.referrer"
              >推荐人：{{ basicForm.referrer }}</span
            >
            <template v-if="basicForm.holdPrsnIsLegal == '0'">
              <span>控股人姓名：{{ basicForm.holdPrsnCertName }}</span>
              <span>控股人联系方式：{{ basicForm.holdPrsnMobile }}</span>
              <span>控股人性别：{{ basicForm.holdPrsnGenderName }}</span>
              <span>控股人身份证号：{{ basicForm.holdPrsnCertNo }}</span>
              <span
                >控股人身份证有效期：{{ basicForm.holdPrsnCertMfgDate }} 至
                {{ basicForm.holdPrsnCertExpDate }}</span
              >
            </template>
            <template v-if="basicForm.receiptorIsLegal == '0'">
              <span>受益人姓名：{{ basicForm.receiptorName }}</span>
              <span>受益人联系方式：{{ basicForm.receiptorMobile }}</span>
              <span>受益人性别：{{ basicForm.receiptorGenderName }}</span>
              <span>受益人身份证号：{{ basicForm.receiptorCertNo }}</span>
              <span
                >受益人身份证有效期：{{ basicForm.receiptorCertMfgDate }} 至
                {{ basicForm.receiptorCertExpDate }}</span
              >
              <span
                >受益人所在区域：{{ basicForm.receiptorProvCodeName }}/{{
                  basicForm.receiptorCityCodeName
                }}/{{ basicForm.receiptorCountyCodeName }}</span
              >
              <span>受益人详细地址：{{ basicForm.receiptorAdderss }}</span>
            </template>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <span
              class="picture-preview haruyuki-mr-20"
              @click.stop="picDetails(basicForm.rpiNo)"
              >资质证件照预览</span
            >
            <span
              class="picture-preview"
              @click.stop="picUpdate(basicForm.rpiNo)"
              >资质证件照补充</span
            >
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-bank-card"></i
        ><span class="haruyuki-ml-6">{{ posTitle.cardTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <div class="mer-m-b-8 merchant-font-bold">
          结算卡类型：{{ account.balanceAccTypeName }}
        </div>
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>结算账户名称：{{ account.balanceAccName }}</span>
            <span>结算账户卡号：{{ account.balanceAccCardNo }}</span>
            <span>结算人证件类型：{{ account.certTypeName }}</span>
          </div>
          <div class="merchant-item-content">
            <span>开户行：{{ account.bankName }}</span>
            <span>开户支行：{{ account.openAccBankName }}</span>
            <span>银行预留手机号：{{ account.bankMobile }}</span>
          </div>
        </div>

        <div
          class="merchant-box adaptive haruyuki-mt-20"
          v-if="account.companyIsAdd == '1'"
        >
          <div class="merchant-item-content">
            <span class="merchant-font-bold">附加对公信息</span>
            <span>结算账户名称：{{ account.companyAccName }}</span>
            <span>结算账户卡号：{{ account.companyAccBankNo }}</span>
          </div>
          <div class="merchant-item-content">
            <span>开户行：{{ account.companyAccBankName }}</span>
            <span>开户支行：{{ account.companyAccBankSubName }}</span>
            <span>银行预留手机号：{{ account.companyAccMobile }}</span>
          </div>
        </div>

        <div
          class="merchant-box adaptive haruyuki-mt-20"
          v-if="
            account.reservedBalanceAccType == '11' ||
            account.reservedBalanceAccType == '21'
          "
        >
          <div class="merchant-item-content">
            <span class="merchant-font-bold">备用结算信息</span>
            <span>结算账户名称：{{ account.reservedBalanceAccName }}</span>
            <span>结算账户卡号：{{ account.reservedBalanceAccCardno }}</span>
          </div>
          <div class="merchant-item-content">
            <span
              >结算账户类型：{{
                account.reservedBalanceAccType == "11" ? "对私" : "对公"
              }}</span
            >
            <span>开户行：{{ account.reservedBankName }}</span>
            <span>开户支行：{{ account.reservedOpenAccBankname }}</span>
          </div>
        </div>
      </div>
      <!-- START remark -->
      <!-- <div v-if="rpiStatus != '1'"> -->
      <div>
        <div class="haruyuki-title haruyuki-size-16" v-if="basicForm.remark">
          <i class="el-icon-chat-line-square"></i
          ><span class="haruyuki-ml-6">{{ posTitle.remarkTitle }}</span>
        </div>
        <div class="haruyuki-content" v-if="basicForm.remark">
          {{ basicForm.remark }}
        </div>
      </div>
      <!-- END remark -->

      <!-- START payfunc -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ posTitle.payTitle }}</span>
        </div>
        <!-- active-color="#13ce66" -->
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          :class="[payItem.show ? 'merchant-icon-func' : '']"
          v-for="payItem in payData"
          :key="payItem.id"
        >
          <div v-if="payItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="payItem.image"
              fit="fill"
              @click="payFuncOperate(payItem.id)"
            ></el-image>
            <div class="cursor" @click="payFuncOperate(payItem.id)">
              {{ payItem.name }}
            </div>
          </div>
        </div>
      </div>
      <!-- END payfunc -->

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i
          ><span class="haruyuki-ml-6">{{ posTitle.merchantTitle }}</span>
        </div>
        <div>
          定位权限：
          <el-switch
            active-value="1"
            inactive-value="0"
            v-model="ipLimit"
            style="margin-left: 10px"
            @change="ipLimitOpen"
          >
          </el-switch>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          style="margin-bottom: 30px"
          v-for="moduleItem in moduleData"
          :key="moduleItem.id"
        >
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>

      <!-- START thirdPartyTitle -->
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-guide"></i
        ><span class="haruyuki-ml-6">{{ posTitle.thirdPartyTitle }}</span>
      </div>
      <div class="haruyuki-content merchant-box">
        <div
          class="merchant-icon-func"
          v-for="thirdPartyItem in thirdPartyData"
          :key="thirdPartyItem.id"
        >
          <div v-if="thirdPartyItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="thirdPartyItem.image"
              fit="fill"
              @click="thirdPartyOpen(thirdPartyItem)"
            ></el-image>
            <div class="cursor">{{ thirdPartyItem.name }}</div>
          </div>
        </div>
      </div>
      <!-- END thirdPartyTitle -->

      <!-- START aisle -->
      <div
        class="haruyuki-title haruyuki-size-16"
        v-if="basicForm.merchantType == '1'"
      >
        <i class="el-icon-connection"></i
        ><span class="haruyuki-ml-6">{{ posTitle.aisleTitle }}</span>
      </div>
      <div
        class="haruyuki-content merchant-box"
        v-if="basicForm.merchantType == '1'"
      >
        <div class="merchant-icon-card">
          <div class="item-card">
            <div class="item-card-label">
              <el-image
                style="width: 60px; height: 60px"
                :src="rateInformation.aisleLogo"
                fit="fill"
              ></el-image>
              <span class="haruyuki-ml-6">{{ rateInformation.aisleName }}</span>
            </div>
            <div class="item-card-content">
              <div class="info-switch">
                <span>秒到功能：</span>
                <el-switch
                  size
                  active-value="1"
                  inactive-value="0"
                  :disabled="rpiExStatus != 3 || codeStatus"
                  v-model="opType"
                  @change="secondsOpen(opType)"
                >
                </el-switch>
              </div>
              <span class="solid"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- END aisle -->
    </section>
    <el-dialog
      :title="'编辑' + dialogText"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basicForm
            :basicForm="basicForm"
            ref="toBasicForm"
            :isImgShow="false"
          />
        </div>
      </template>
      <template>
        <div v-if="active == 1">
          <cardForm :cardForm="cardForm" ref="toCardForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <rateForm :rateForm="rateForm" ref="toRateForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 3">
          <shopForm :shopForm="shopForm" ref="toShopForm" />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>

    <!-- <el-dialog
      :title="'资质证照预览（' + basicForm.legalPersonName + '）'"
      append-to-body
      width="65%"
      :visible.sync="imageVisible"
    >
      <template>
        <imagesPreview :merchantForm="merchantForm" ref="toImagesPreview" />
      </template>
    </el-dialog> -->
    <!-- <el-dialog
      :title="'资质证照修改（' + basicForm.legalPersonName + '）'"
      width="60%"
      append-to-body
      :visible.sync="imageUpdateVisible"
    >
      <template>
        <imagesUpdate :merchantForm="picUpdateForm" ref="toImagesUpdate" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handlePicSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog> -->

    <!-- 绑定终端
    <el-dialog
      :title="terminalDialog.text"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="terminalDialog.visible"
      v-if="terminalDialog.visible"
      :before-close="terminalDialogHandleClose"
      ref="terDialog"
    >
      <terminalDialog
        ref="terminalDialog"
        :terminalDialog="terminalDialog"
        :rptNoList="rptNoList"
        :rpiNo="rpiNo"
        :terminalDForm="terminalDForm"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => { terminalDialog.visible = false; this.$refs['terminalDialog'].initEmpty(); }">取 消</el-button>
        <el-button type="primary" v-preventClick @click="terminalDialogSubmit" v-if="!terminalDialog.disabled">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 商户信息变更 -->
    <el-dialog
      title="变更商户信息"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogAlterVisible"
      :before-close="handleAlterClose"
    >
      <template>
        <!-- <div class="merchant-padding" v-if="dialogType === 'edit'">
          <audit-record :rejectRecord="rejectRecord" ref="toAuditRecord" />
        </div> -->
        <alter-form
          :isAlterShow="isAlterShow"
          :rpiNo="rpiNo"
          ref="toAlterForm"
        />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" size="small" @click="cancelAlter"
          >取 消</el-button
        >
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click="handleConfirm"
          >提 交</el-button
        >
      </span>
    </el-dialog>

    <!-- 变更归属服务商 -->
    <el-dialog
      title="变更归属服务商"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogServiceVisible"
    >
      <avue-form
        ref="serveForm"
        :option="serveOption"
        v-model="serveForm"
        @submit="serveSubmit"
      >
        <template slot="oldSerNo" slot-scope="{}">
          <div
            class="el-input el-input--small el-input--suffix avue-input feint-input"
          >
            <span style="float: left">{{ serveForm.oldSerName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              serveForm.oldSerNo
            }}</span>
          </div>
        </template>
        <template slot-scope="{}" slot="serNo">
          <select-page
            ref="searchSerSelect"
            label="serviceName"
            value="serviceNo"
            :select.sync="serveForm.serNo"
            :url="website.searchLink.serviceUrl"
            placeholder-text="目标服务商"
            filter-key="searchKey"
            :params="searchSerSelectParams"
            @update:select="serNoChange"
          ></select-page>
        </template>
        <template slot="oldAccountManager" slot-scope="{}">
          <div
            class="el-input el-input--small el-input--suffix avue-input feint-input"
          >
            <span style="float: left">{{
              serveForm.oldAccountManagerName
            }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              serveForm.oldAccountManager
            }}</span>
          </div>
        </template>
      </avue-form>
    </el-dialog>
    <!-- 变更归属集团商户 -->
    <el-dialog
      title="集团商户管理"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogGroupVisible"
    >
      <module-group ref="toGroup" :group-form="groupForm"></module-group>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="
            () => {
              dialogGroupVisible = false;
              this.$refs['toGroup'].initEmpty();
            }
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          size="small"
          v-preventClick
          @click="groupSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-image-viewer
      style="z-index: 2048"
      v-if="alipayImgShow"
      :on-close="
        () => {
          alipayImgShow = false;
        }
      "
      :url-list="alipayImg"
    ></el-image-viewer>
  </basic-container>
</template>

<script>
import {
  getInfoDetail,
  // getPicDetail,
  // getPicUpdateDetail,
  // basicInformationUpdate,
  // updateAllPic,
  // updatePicAll,
  ipLimitChange,
  getServiceChangeDetail,
  serviceChange,
  groupChange,
  postOptOnlineDO,
} from "@/api/rb-oem/posinfo/pos_info_details";
import {
  updateFirstStep,
  getAccountManagerList,
} from "@/api/rb-oem/posinfo/pos_info";

import basicForm from "@/components/rb-merchant/basic-form";
import cardForm from "@/components/rb-merchant/card-form";
import rateForm from "@/components/rb-merchant/rate-form";
import shopForm from "@/components/rb-merchant/shop-form";
// import imagesPreview from "@/components/rb-merchant/images-preview";
// import imagesUpdate from "@/components/rb-merchant/images-update";
import alterForm from "@/components/rb-merchant/alter-form.vue";
import { add, getRptNo } from "@/api/rb-oem/terminal/terminal";
import terminalDialog from "./component/terminalDialog";
import moduleGroup from "./component/module_group";
import selectPage from "@/components/select-page/select-page";

export default {
  components: {
    basicForm,
    cardForm,
    rateForm,
    shopForm,
    // imagesPreview,
    // imagesUpdate,
    alterForm,
    terminalDialog,
    moduleGroup,
    selectPage,
  },
  data() {
    return {
      posTitle: {
        basicTitle: "商户信息",
        cardTitle: "结算信息",
        rateTitle: "费率信息",
        remarkTitle: "备注信息",
        aisleTitle: "支付通道",
        firmTitle: "支付公司",
        hardwareTitle: "硬件设备配置",
        payTitle: "支付信息",
        merchantTitle: "商户管理",
        thirdPartyTitle: "商户插件管理",
        activityRequest: "活动申请",
      },
      dialogVisible: false,
      dialogType: "", //打开类型 add/edit
      dialogText: "",
      active: 0,
      imageVisible: false,
      // imageUpdateVisible: false,
      dialogAlterVisible: false,
      isAlterShow: false, //是否显示变更表单某内容
      information: {},
      account: {},
      rateInformation: {},
      basicForm: {
        userType: "",
        industryCode: "",
        mccCd: "",
        userShortName: "",
        handHeld: "",
        cardFront: "",
        cardReverse: "",
        legalPersonName: "",
        crpGender: "",
        legalPersonPhone: "",
        crpProfession: "",
        legalPersonId: "",
        legalPersonIdSdate: "",
        legalPersonIdEdate: "",
        mercProvinceCityArea: [],
        legalProvinceCityArea: [],
        mercProvCode: "",
        mercCityCode: "",
        mercAreaCode: "",
        crpAddr: "",
        licensePic: "",
        businessLicence: "",
        businessLicenceNo: "",
        businessLicenceSDate: "",
        businessLicenceEDate: "",
        contactsName: "",
        contactsPhone: "",
        contactsEmail: "",
        contactsAddr: "",
        remark: "",
      },
      payData: [
        // {
        //   id: 1,
        //   name: "微信实名认证",
        //   image: "/img/merchant-icon/wechat.png",
        //   show: true,
        // },
        // {
        //   id: 2,
        //   name: "支付宝认证",
        //   image: "/img/merchant-icon/alipay.png",
        //   show: true,
        // },
        {
          id: 1,
          name: "实名认证",
          image: "/img/merchant-icon/auth.png",
          type: "auth",
          show: true,
        },
        {
          id: 3,
          name: "签约费率",
          image: "/img/merchant-icon/rate.png",
          type: "rate",
          show: true,
        },
        {
          id: 4,
          name: "通道配置",
          image: "/img/merchant-icon/aisle.png",
          type: "aisle",
          show: true,
        },
        {
          id: 6,
          name: "支付即开票",
          image: "/img/merchant-icon/update.png",
          type: "payinvoice",
          show: true,
        },
        {
          id: 5,
          name: "信息变更",
          image: "/img/merchant-icon/alteration.png",
          type: "alteration",
          show: true,
        },
        // {
        //   id: 6,
        //   name: "变更记录",
        //   image: "/img/merchant-icon/alter_record.png",
        //   type: 'alter_record',
        //   show: true,
        // }
      ],
      moduleData: [
        {
          id: 1,
          name: "门店管理",
          image: "/img/merchant-icon/store.png",
          type: "store",
          show: true,
        },
        {
          id: 2,
          name: "终端管理",
          image: "/img/merchant-icon/terminal.png",
          type: "terminal",
          show: true,
        },
        {
          id: 3,
          name: "设备管理",
          image: "/img/merchant-icon/equipment.png",
          type: "equipment",
          show: true,
        },
        {
          id: 4,
          name: "变更服务商归属",
          image: "/img/merchant-icon/service.png",
          type: "service",
          show: true,
        },
        {
          id: 5,
          name: "集团商户管理",
          image: "/img/merchant-icon/group.png",
          type: "group",
          show: true,
        },
        {
          id: 6,
          name: "店员管理",
          image: "/img/merchant-icon/posStaff.png",
          type: "store",
          show: true,
        },
        {
          id: 7,
          name: "电子签约",
          image: "/img/merchant-icon/websign.png",
          type: "sign",
          show: false,
        },
      ],
      merchantForm: {},
      // picUpdateForm: {},
      rpiNo: "",
      merchantId: "",
      rpiExStatus: 0,
      codeStatus: false,
      loading: false,
      isAisleShow: "", //通道配置
      rpiStatus: null,
      contractSignUrl: "",
      ipLimit: "0", //定位权限
      opType: "0", //秒到功能 0否 1是
      terminalDialog: {
        disabled: false,
        visible: false,
        type: "add",
        text: "绑定终端",
      },
      rptNoList: [], //类型
      alipayImgShow: false, //支付宝
      alipayImg: [], //支付宝
      dialogServiceVisible: false,
      serveForm: {},
      serveOption: {
        emptyBtn: false,
        column: [
          {
            label: "原归属服务商",
            prop: "oldSerNo",
            type: "input",
            labelWidth: 120,
            span: 24,
            overHidden: true,
          },
          {
            label: "原归属客户经理",
            prop: "oldAccountManager",
            type: "input",
            labelWidth: 120,
            span: 24,
            overHidden: true,
          },
          {
            label: "目标服务商",
            labelWidth: 120,
            prop: "serNo",
            span: 24,
            type: "select",
            formslot: true,
            // minRows: 2,
            // filterable: true,
            // dicUrl: "/api/rb-oem/oem/serviceInfo/service_info/searchList?&searchKey={{key}}",
            // dataType: "string",
            // props: {
            //   label: "serviceName",
            //   value: "serviceNo",
            //   desc: "serviceNo",
            // },
            // dicFormatter:(data)=>{
            //   return data.data.records
            // },
            // component: 'selectPage',
            // change: (row) => {
            //   if (row) {
            //     // 获取供应商
            //     this.serveForm.accountManager = '';
            //     if (row.value) {
            //       let serviceInfo = row.column.dicData.filter(obj => obj.serviceNo == row.value);
            //       getAccountManagerList({ createUser: serviceInfo[0].userId }).then((res) => {
            //         const column = this.findObject(this.serveOption.column, "accountManager");
            //         column.dicData = res.data.data;
            //       });
            //     }
            //   }
            // },
            rules: [
              {
                required: true,
                message: "请选择目标服务商",
                trigger: "blur",
              },
            ],
          },
          {
            label: "目标客户经理",
            labelWidth: 120,
            prop: "accountManager",
            span: 24,
            minRows: 2,
            type: "select",
            filterable: true,
            formslot: true,
            props: {
              label: "userName",
              value: "userNo",
              desc: "userNo",
            },
            dicData: [],
            // rules: [
            //   {
            //     required: true,
            //     message: "请选择目标客户经理",
            //     trigger: "blur",
            //   },
            // ],
          },
        ],
      },
      searchSerSelectParams: {
        isSelectChild: "1",
        serviceNo: "",
      },
      dialogGroupVisible: false,
      groupForm: {
        changeType: "0",
        rpiName: "",
        rpiNo: "",
        groupRpiNo: "",
      },
      thirdPartyData: [
        {
          id: 1,
          name: "第三方",
          image: "/img/merchant-icon/plugin-dsf.png",
          type: "store",
          show: true,
        },
        {
          id: 2,
          name: "视频引流",
          image: "/img/merchant-icon/plugin-spyl.png",
          type: "store",
          show: true,
        },
        {
          id: 3,
          name: "私域管理",
          image: "/img/merchant-icon/plugin-sygl.png",
          type: "store",
          show: true,
        },
      ],
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  watch: {
    "$route.query.d": {
      handler(val) {
        if (val) {
          const param = JSON.parse(this.$crypto.decrypt(val));
          const { rpiNo, rpiExStatus } = param;
          this.rpiNo = rpiNo;
          this.rpiExStatus = rpiExStatus;
          this.infoData();
          this.requestRptNo();
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @func 商户插件管理-第三方点击
     * */
    thirdPartyOpen(row) {
      switch (row.id) {
        case 1:
          this.$router.push({
            path: "/rb-oem/posinfo/pluginUnit",
            query: {
              rpiNo: this.rpiNo,
            },
          });
          break;
        case 2:
          this.$router.push({
            name: "视频引流",
            query: {
              rpiNo: this.rpiNo,
            },
          });
          break;
        case 3:
          this.$router.push({
            name: "私域管理",
            query: {
              rpiNo: this.rpiNo,
            },
          });
          break;
      }
    },
    /**
     * @func 支付信息功能
     * @desc 支付信息功能 操作控制
     * */
    payFuncOperate(id) {
      switch (id) {
        case 1:
          this.wxAuthentication();
          break;
        case 2:
          this.clickAlipay();
          break;
        case 3:
          this.getRatePage();
          break;
        case 4:
          this.getAislePage();
          break;
        case 5:
          this.getAlterPage();
          break;
        case 6:
          this.getPayInvoicePage();
          break;
      }
    },
    /**
     * @func 支付信息功能-1(微信实名认证)
     * @desc 微信实名认证 WeChat
     * */
    wxAuthentication() {
      this.$router.push({
        name: "实名认证",
        query: {
          d: this.$crypto.encrypt(
            JSON.stringify({ rpiNo: this.rpiNo, id: this.id })
          ),
        },
      });
    },
    /**
     * @func 支付信息功能-2(支付宝认证)
     * @desc 支付宝认证 Alipay
     * */
    clickAlipay() {
      if (this.alipayImg.length == 0) {
        this.$message({ type: "error", message: "暂无数据，请联系管理员！" });
      } else {
        this.alipayImgShow = true;
      }
    },
    /**
     * @func 支付信息功能-3(签约费率)
     * @desc 签约费率 rate
     * */
    getRatePage() {
      this.$router.push({
        name: "签约费率",
        query: {
          rpiNo: this.rpiNo,
          id: this.merchantId,
        },
      });
    },
    /**
     * @func 支付信息功能-4(通道配置)
     * @desc 通道配置 aisle
     * */
    getAislePage() {
      if (this.isAisleShow == "1") {
        this.$router.push({
          name: "通道配置",
          query: {
            rpiNo: this.rpiNo,
          },
        });
      } else {
        this.$message({ type: "warning", message: "暂无默认通道" });
      }
    },
    /**
     * @func 支付信息功能-4(通道配置)
     * @desc 通道配置 aisle
     * */
    getAlterPage() {
      this.dialogAlterVisible = true;
    },
    /**
     * @func 支付信息功能-6(支付即开票)
     * @desc 支付即开票
     * */
    getPayInvoicePage() {
      this.$router.push({
        path: '/rb-oem/payinvoice/payinvoice_menu',
        name: "支付即开票",
        query: {
          rpiNo: this.rpiNo,
        },
      });
    },
    /**
     * @func 变更类型信息确认
     * @desc alterType(变更/修改)确认
     * */
    handleConfirm() {
      this.$refs["toAlterForm"].$refs["alterForm"].validate((valid) => {
        if (valid) {
          if (this.$refs["toAlterForm"].alterForm.changeType != "2") {
            this.$refs["toAlterForm"].alterForm.rateType = "";
          }
          if (this.$refs["toAlterForm"].alterForm.changeType === "4") {
            if (
              this.$refs["toAlterForm"].alterForm.aisleCode == "A0000023" ||
              this.$refs["toAlterForm"].alterForm.aisleCode == "A0000024" ||
              this.$refs["toAlterForm"].alterForm.aisleCode == "A0000046"
            ) {
              this.$router.push({
                name: "商户变更",
                query: {
                  rpiNo: this.rpiNo,
                  changeType: this.$refs["toAlterForm"].alterForm.changeType,
                  aisleCode: this.$refs["toAlterForm"].alterForm.aisleCode,
                  alterType: "add",
                  rateType: this.$refs["toAlterForm"].alterForm.rateType,
                },
              });
            } else {
              this.$message.error("该通道暂不支持！");
            }
          } else {
            this.$router.push({
              name: "商户变更",
              query: {
                rpiNo: this.rpiNo,
                changeType: this.$refs["toAlterForm"].alterForm.changeType,
                aisleCode: this.$refs["toAlterForm"].alterForm.aisleCode,
                alterType: "add",
                rateType: this.$refs["toAlterForm"].alterForm.rateType,
              },
            });
          }
        } else {
          return false;
        }
      });
    },
    /**
     * @func 关闭变更弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成回调
     * */
    handleAlterClose(done) {
      this.$refs["toAlterForm"].$refs["alterForm"].resetFields();
      done();
    },
    /**
     * @func 关闭变更弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成回调
     * */
    cancelAlter() {
      this.dialogAlterVisible = false;
      this.$refs["toAlterForm"].$refs["alterForm"].resetFields();
    },
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.getStorePage();
          break;
        case 2:
          // this.terminalDialog.visible = true;
          this.getTerminalPage();
          break;
        case 3:
          this.$router.push({
            name: "设备管理",
            query: {
              rpiNo: this.rpiNo,
            },
          });
          break;
        case 4:
          this.handleBelongerService();
          break;
        case 5:
          this.handleBelongerGroup();
          break;
        case 6:
          this.$router.push({
            name: "店员管理",
            query: {
              rpiNo: this.rpiNo,
            },
          });
          break;
        case 7:
          window.open(this.contractSignUrl);
          break;
      }
    },
    /**
     * @func 商户模块管理-1(门店管理)
     * @desc 门店管理 store
     * */
    getStorePage() {
      this.$router.push({
        name: "门店管理",
        query: {
          rpiNo: this.rpiNo,
        },
      });
    },
    /**
     * @func 商户模块管理-2(终端管理)
     * @desc 门店管理 store
     * */
    getTerminalPage() {
      this.$router.push({
        name: "终端管理",
        query: {
          rpiNo: this.rpiNo,
        },
      });
    },
    /**
     * @func 商户模块管理-4(变更归属服务商)
     * @desc 变更归属服务商
     * */
    handleBelongerService() {
      this.dialogServiceVisible = true;
      const accountManagerColumn = this.findObject(
        this.serveOption.column,
        "accountManager"
      );
      accountManagerColumn.dicData = [];
      getServiceChangeDetail(this.rpiNo).then((res) => {
        this.serveForm = res.data.data;
        this.serveForm = {
          accountManager: "",
          accountManagerName: "",
          oldAccountManager: res.data.data.accountManager,
          oldAccountManagerName: res.data.data.accountManagerName,
          rpiNo: res.data.data.rpiNo,
          serName: "",
          serNo: "",
          oldSerName: res.data.data.serName,
          oldSerNo: res.data.data.serNo,
        };
        this.searchSerSelectParams.isSelectChild = "1";
        this.searchSerSelectParams.serviceNo = res.data.data.serNo;
        this.$refs["searchSerSelect"].getOptionList(this.searchSerSelectParams);
      });
    },
    /**
     * @func 变更服务商归属change
     * @desc 变更服务商归属选择 change
     * */
    serNoChange(value) {
      // 获取供应商
      this.serveForm.accountManager = "";
      if (value) {
        getAccountManagerList({ createUser: value }).then((res) => {
          const column = this.findObject(
            this.serveOption.column,
            "accountManager"
          );
          column.dicData = res.data.data;
        });
      }
    },
    /**
     * @func 提交已选归属服务商
     * @desc 提交已选归属服务商
     * */
    serveSubmit(row, done, loading) {
      serviceChange(row).then(
        () => {
          this.infoData();
          this.dialogServiceVisible = false;
          this.$message({
            type: "success",
            message: "归属变更成功!",
          });
          this.$refs.serveForm.resetForm();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    /**
     * @func 商户模块管理-5(变更归属集团商户)
     * @desc 变更归属集团商户
     * */
    handleBelongerGroup() {
      this.dialogGroupVisible = true;
    },
    /**
     * @func 提交已选归属集团商户
     * @desc 提交已选归属集团商户
     * */
    groupSubmit() {
      this.$refs["toGroup"].$refs["groupForm"].validate((valid) => {
        if (valid) {
          groupChange(this.groupForm).then(
            () => {
              this.dialogGroupVisible = false;
              this.groupForm.groupRpiNo = "";
              this.$message({
                type: "success",
                message: "设置成功!",
              });
              this.infoData();
            },
            (error) => {
              this.$message({
                type: "error",
                message: error,
              });
            }
          );
        } else {
          return false;
        }
      });
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 终端---新建弹框提交
     * */
    terminalDialogSubmit() {
      /**
       * add  新建
       * edit 修改
       * view 查看详情
       */
      if (this.terminalDialog.type !== "view") {
        this.$refs["terminalDialog"].$refs["terminalDialogForm"].validate(
          (valid) => {
            if (valid) {
              let form = this.$refs["terminalDialog"].terminalDialogForm;
              // -----add---str---
              let rtPara = {};
              form.rtParaList.map((itm) => {
                rtPara[itm.key] = itm.val;
              });
              form.rtPara = JSON.stringify(rtPara);
              // -----add---end---

              let param = {
                rpiNo: this.rpiNo,
                ...this.$refs["terminalDialog"].terminalDialogForm,
              };
              add(param).then(
                () => {
                  this.$refs["terminalDialog"].initEmpty();

                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  // setTimeout(() => {
                  this.terminalDialog.visible = false;
                  // }, 1500);
                },
                (error) => {
                  window.console.log(error);
                }
              );
            }
          }
        );
      }
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 获取 终端类型名称
     * */
    requestRptNo() {
      getRptNo(-1, -1).then((res) => {
        this.rptNoList = res.data.data.records;
      });
    },
    /**
     * @func 商户模块管理-2(绑定终端)
     * @desc 终端 新建弹框 关闭前回调
     * */
    terminalDialogHandleClose(done) {
      this.$refs["terminalDialog"].initEmpty();
      done();
    },
    /**
     * @func 定位功能
     * @desc 定位功能 0否 1是
     * */
    ipLimitOpen() {
      let _this = this;
      _this.loading = true;
      let params = {
        ipLimit: _this.ipLimit,
        rpiNo: _this.rpiNo,
      };
      ipLimitChange(params).then(
        (res) => {
          _this.loading = false;
          if (res.data.code == "200") {
            // _this.ipLimit = _this.ipLimit == 1 ? 0 : 1;
            _this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            _this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          _this.loading = false;
          window.console.log(error);
        }
      );
    },
    /**
     * @func 秒到功能
     * @desc 秒到功能 D0结算
     * */
    secondsOpen(opType) {
      let that = this;
      let param = {
        opType,
        rpiNo: that.rpiNo,
        aisleCode: that.rateInformation.aisleCode,
      };
      that.loading = true;
      postOptOnlineDO(param).then(
        (res) => {
          that.loading = false;
          if (res.data.code == "200") {
            that.codeStatus = false;
            that.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            that.codeStatus = true;
            that.opType = JSON.parse(
              JSON.stringify(that.rateInformation.codeAdvanceOpen)
            );
            that.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          that.loading = false;
          that.codeStatus = true;
          that.opType = JSON.parse(
            JSON.stringify(that.rateInformation.codeAdvanceOpen)
          );
          window.console.log(error);
        }
      );
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.loading = true;
      getInfoDetail(this.rpiNo).then((res) => {
        this.basicForm = res.data.data.informationVO;
        this.merchantId = res.data.data.informationVO.id;
        this.account = res.data.data.settlementVO;
        this.ipLimit = res.data.data.ipLimit;
        this.isAisleShow = res.data.data.isAisleShow;
        this.rpiStatus = res.data.data.rpiStatus;
        this.contractSignUrl = res.data.data.contractSignUrl;
        this.loading = false;
        if (this.contractSignUrl) {
          this.moduleData.find((item, index) => {
            if (item.type === "sign") {
              item.show = true;
            }
          });
        }
        if (this.rpiStatus != "1") {
          this.payData[2].show = false;
          this.payData[3].show = false;
        }
        this.groupForm.rpiNo = this.basicForm.rpiNo;
        this.groupForm.rpiName = this.basicForm.rpiName;
        this.$set(this.basicForm, "mercProvinceCityArea", [
          this.basicForm.mercProvCode,
          this.basicForm.mercCityCode,
          this.basicForm.mercAreaCode,
        ]);
        this.$set(this.basicForm, "legalProvinceCityArea", [
          this.basicForm.legalProvince,
          this.basicForm.legalCity,
          this.basicForm.legalArea,
        ]);
        if (this.basicForm.receiptorIsLegal == "0") {
          this.$set(this.basicForm, "receiptorProvinceCityArea", [
            this.basicForm.receiptorProvCode,
            this.basicForm.receiptorCityCode,
            this.basicForm.receiptorCountyCode,
          ]);
        }
        // this.rateInformation = res.data.data.rateInformation;
        this.rateInformation = {
          aisleCode: res.data.data.aisleCode,
          aisleName: res.data.data.aisleName,
          aisleLogo: res.data.data.aisleLogo,
          codeAdvanceOpen: res.data.data.codeAdvanceOpen,
        };
        this.opType = res.data.data.codeAdvanceOpen;
        if (res.data.data.aliQrCode) {
          this.alipayImg[0] = res.data.data.aliQrCode;
        }
      });
    },
    /* 商户基本信息修改 */
    handleSubmit() {
      const _this = this;
      if (_this.active == 0) {
        _this.informEditForm();
      } else if (_this.active == 1) {
        // } else if (_this.active == 2) {
        // } else if (_this.active == 3) {
        // } else if (_this.active == 4) {
      }
    },
    // /**
    //  * @func 资质证件照片提交
    //  * @desc 资质证件照片更换 提交
    //  * */
    // handlePicSubmit() {
    //   updatePicAll(this.picUpdateForm).then(
    //     (res) => {
    //       if (res.data.code == "200") {
    //         this.$message({
    //           type: "success",
    //           message: "修改资质证件照成功!",
    //         });
    //         this.imageUpdateVisible = false;
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: res.data.message,
    //         });
    //       }
    //     },
    //     (error) => {
    //       window.console.log(error);
    //     }
    //   );
    // },
    handleClose(done) {
      this.emptyForm();
      done();
      this.infoData();
    },
    emptyForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      // this.$refs["toCardForm"].$refs["cardForm"].resetFields();
      // this.$refs["toRateForm"].$refs["rateForm"].resetFields();
      // this.$refs["toShopForm"].$refs["shopForm"].resetFields();
    },
    informEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          [
            this.basicForm.legalProvince,
            this.basicForm.legalCity,
            this.basicForm.legalArea,
          ] = this.basicForm.legalProvinceCityArea;
          [
            this.basicForm.mercProvCode,
            this.basicForm.mercCityCode,
            this.basicForm.mercAreaCode,
          ] = this.basicForm.mercProvinceCityArea;
          if (this.basicForm.receiptorIsLegal == "0") {
            [
              this.basicForm.receiptorProvCode,
              this.basicForm.receiptorCityCode,
              this.basicForm.receiptorCountyCode,
            ] = this.basicForm.receiptorProvinceCityArea;
          }
          this.basicForm.id = this.merchantId;
          // basicInformationUpdate
          updateFirstStep(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    informEdit() {
      this.dialogVisible = true;
      this.dialogText = "基本信息";
      this.active = 0;
      this.$nextTick(() => {
        // this.$refs["toBasicForm"].isShow = false;
        // console.log(this.$refs["toBasicForm"], '["toBasicForm"]');
        this.$refs["toBasicForm"].getMccIndustry(
          this.basicForm.userType,
          this.basicForm.ysMerchantKey
        );
        this.$refs["toBasicForm"].getMccChildren(this.basicForm.industryCode);
        this.$refs["toBasicForm"].getCrpProfessionLittle(
          this.basicForm.crpProfession
        );
        if (this.basicForm.isLegal == "0") {
          this.$refs["toBasicForm"].isLegalban = false;
        } else if (this.basicForm.isLegal == "1") {
          this.$refs["toBasicForm"].isLegalban = true;
        }
        this.$refs["toBasicForm"].isShow = true;
      });
    },
    /* 商户资质证件图片 预览 */
    picDetails(rpiNo) {
      this.$router.push({
        name: "资质证件照预览",
        query: {
          rpiNo: rpiNo,
        },
      });

      // this.imageVisible = true;
      // getPicDetail(rpiNo).then((res) => {
      //   if (res.data.code == "200") {
      //     this.merchantForm = res.data.data;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.data.message,
      //     });
      //   }
      // });
    },
    /* 商户资质证件图片 修改 */
    picUpdate(rpiNo) {
      this.$router.push({
        name: "资质证件照补充",
        query: {
          rpiNo: rpiNo,
        },
      });
      // this.imageUpdateVisible = true;
      // // getPicUpdateDetail(rpiNo).then((res) => {
      // getPicDetail(rpiNo).then((res) => {
      //   if (res.data.code == "200") {
      //     this.picUpdateForm = res.data.data;
      //     this.picUpdateForm.rpiNo = rpiNo;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.data.message,
      //     });
      //   }
      // });
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-font-bold {
  font-weight: bold;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}

.info-switch {
  width: calc(100% / 2);
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #4663fd;
}

.solid {
  &:before {
    content: "｜";
    color: #99a7b1;
  }
}

.feint-input {
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  // color: #c0c4cc;
  color: #7f7f7f;
  // cursor: not-allowed;
}
</style>